<template>
  <div class="circular">
    <div ref="refChart" class="chart"></div>
    <ul class="legend">
      <li v-for="(item, index) in data" :key="index">
        <div :style="{background:index < colors.length?colors[index]:echartsColors[index - colors.length]}"></div>
        <span>{{ item.name }}</span>
        <span>{{ item.value }}</span>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, defineProps, onMounted, onBeforeUnmount, watch } from 'vue';
import * as eCharts from 'echarts';
import {getScale, calculateChartGrid} from './ChartUtils.js';
const colors = ['#03BEFE', '#159CFD', '#34C3E1'];
const echartsColors = ['#03BEFE', '#159CFD', '#03BEFE', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
const refChart = ref(null);

/**组件属性 */
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  serieName: {
    type: String,
    default: ''
  },
  /**文字大小 */
  fontSize:{
    type: Number,
    default: 14
  }
});

watch(() => props.data, (v) => {
  if (chart) {
    const { serieName } = props;
    const option = getOption(v, serieName);
    chart.setOption(option);
  }
});

let chart;
onMounted(() => {
  const circularDom = refChart.value;
  chart = eCharts.init(circularDom);
  const { data, serieName } = props;
  if (data.length > 0) {
    const option = getOption(data, serieName);
    chart.setOption(option);
  }
  window.addEventListener('resize', resize);
});

/**组件取消挂载之前 */
onBeforeUnmount(()=>{
  window.removeEventListener('resize', resize);
})
/**图表大小变化重新渲染 */
const resize = () =>{
  if (chart) {
    const { data, serieName } = props;
    let option = getOption(data, serieName);
    chart.setOption(option, true);
    chart.resize();
  }
}
/**
 * 深度合并对象
 */
const deepObjectMerge = (targ, source) => {
  const target = targ;
  for (const key in source) {
    if (key.hasOwnProperty) {
      target[key] =
        target[key] && typeof target[key] === 'object'
          ? deepObjectMerge(target[key], source[key])
          : (target[key] = source[key]);
    }
  }
  return target;
};
/**获取图标配置 */
const getOption = (data, serieName) => {
  const option = getDefaultOption();
  const cl = colors.length;
  let max = 0;
  let radiusAxisData = [];
  data.forEach(({ name, value }) => {
    radiusAxisData.push(name);
    max += value;
  });
  option.angleAxis.max = max;
  option.radiusAxis.data = radiusAxisData;
  option.series[0].name = serieName;
  option.series[0].data = data.map(({ name, value }, index) => {
    return {
      name,
      value,
      itemStyle: {
        color: index < cl ? colors[index] : echartsColors[index - cl]
      }
    };
  });
  return option;
};

/**获取图表默认配置 */
const getDefaultOption = ()=>{
  return {
    angleAxis: {
      type: 'value',
      min: 0,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    radiusAxis: {
      type: 'category',
      z: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        margin: getScale()*14,
        fontSize: getScale()*12,
        textStyle: {
          color: 'rgba(255,255,255,0.85)'
        }
      }
    },
    polar: {
      center: ['50%', '50%']
    },
    tooltip: {
      show: true
    },
    series: [
      {
        type: 'bar',
        barWidth: getScale()*16,
        coordinateSystem: 'polar',
        roundCap: true
      }
    ]
  };
}
</script>
<style lang="less" scoped>
.circular {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.chart {
  width: 48%;
  height: 100%;
}

.legend {
  width: 42%;
  height: 100%;
  list-style: none;
  padding: 0 0.625rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.625rem;
}
.legend > li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.legend div {
  width: 0.875rem;
  height: 0.875rem;
}
</style>
